//专门写轮播图代码
let imageList=['./images/1.jpeg',"./images/2.jpeg","./images/3.jpeg","./images/4.jpeg","./images/5.jpeg"];
function crousel(){
    let pre=document.getElementsByClassName("click-button");
    let carousel=document.querySelector(".carousel div ul");
    let showBox=document.querySelectorAll(".carousel div ul li img");
    let points=document.querySelectorAll(".point div");
    let imageCount=imageList.length;
    let imgWith=540;//每一张图片定义的长度；
    let maxTranslateX=(imageCount-1)*imgWith;//最大偏移长度
    let currentX=0;//当前的偏移量
    let currentNum=0;//当前是第几个小点
 
    // 前一张图片
    pre[1].onclick=function(){
        if(currentX==0){
            currentX=-maxTranslateX
        }else{
            currentX=currentX+540
        }
        pointMove()
    }

    // 后一张图片
    pre[0].onclick=function(){
        auto()
    }

    // 点击下标点跳转
    for (let i = 0; i < points.length; i++) {
        points[i].onclick=function(){
            currentX=-i*imgWith
            pointMove();
        }   
    }
    // 公共函数 
    function pointMove(){
        points[currentNum].classList.remove("active");
        currentNum=Math.abs(currentX)/imgWith; 
        points[currentNum].classList.add("active")
        carousel.style.transform = `translateX(${currentX}px)`;  
    }

    // 自动播放函数
    function auto(){
        if(Math.abs(currentX)>=Math.abs(maxTranslateX)){
            currentX=0
            points[0].classList.add('active');
        }else{
            currentX=currentX-540
        }
       pointMove();
    }
    let timeId= window.setInterval(auto,4000);

    // 鼠标移入移出处理,移入暂停自动播放,移出继续播放
    for (let i = 0; i < showBox.length; i++) {
        showBox[i].onmouseover=function(){
           clearInterval(timeId)
        }
        showBox[i].onmouseout=function(){
            timeId= window.setInterval(auto,2000)     
        }
    }
}
crousel();